@images: "./../../img/home";
.home-index {
    padding-top: 18rem;
    .click-more {
        height: 9rem;
        line-height: 9rem;
        font-size: 3.2rem;
        text-align: center;
        margin: 2rem 0;
        background: #fff;
    }
    .img {
        width: 100%;
    }
    .fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1001;
    }
    .swiper-container {
        font-size: 0;
    }
    .home-index-grade {
        line-height: 9rem;
        color: #f4f4f4;
        font-size: 3.6rem;
        text-align: center;
        background: #3271f1;
        padding: 0 1.8rem;
        position: relative;
        span {
            position: relative;
            &:after {
                content: '';
                display: inline-block;
                margin-left: .7rem;
                width: 2.3rem;
                height: 1.3rem;
                background: url("@{images}/arrDown.png") no-repeat;
                background-size: 100%;
                vertical-align: middle;
                position: absolute;
                top: 50%;
                margin-top: -0.85rem;
            }
        }
        .shopping-car {
            float: right;
            width: 4.2rem;
            height: 4.2rem;
            background: url("@{images}/shoppingCar.png") no-repeat;
            background-size: 100%;
            position: absolute;
            top: 50%;
            right: 3.3rem;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
        }
        .shopping-nums {
            position: absolute;
            min-width: 3rem;
            min-height: 3rem;
            padding: .1rem;
            top: -1.5rem;
            right: -1.5rem;
            background: #fe0000;
            font-size: 2.2rem;
            color: #fff;
            line-height: 3rem;
            text-align: center;
            border-radius: 50%;
            font-style: normal;
        }
    }
    .filter {
        /* display: flex; */
        background: #fff;
        &:after {
            content: '';
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        li {
            border-bottom: 1px solid #eaeaea;
            line-height: calc(9rem - 1px);
            color: #333;
            width: 25%;
            font-size: 3.2rem;
            text-align: center;
            /* flex:1; */
            float: left;
            background: #fff;
            text-align: center;
            &:after {
                content: '';
                display: inline-block;
                margin-left: .7rem;
                width: 1.5rem;
                height: .9rem;
                background: url("@{images}/litArrDown.png") no-repeat;
                background-size: 100%;
                vertical-align: middle;
                position: relative;
                top: -4px;
            }
        }
        .selectFilter {
            color: #3271f1;
            &:after {
                content: '';
                background: url("@{images}/blueArr.png") no-repeat;
                background-size: 100%;
            }
        }
    }
    .filter-outer {
        position: relative;
        .filter-mask {
            position: fixed;
            top: 18rem;
            left: 0;
            width: 100%;
            height: calc(100% - 18rem);
            background: rgba(0, 0, 0, 0.6);
            .filter-block {
                background: #fff;
                padding-left: 3rem;
                max-height: 100%;
                overflow-y: auto;
                transform: scaleY(0);
                -webkit-transform-origin: top left;
                transition: transform .3s;
            }
            .final-height {
                transform: scaleY(1);
            }
            .off-height {
                transform: scaleY(0);
            }
            @keyframes scale {
                0% {
                    transform: scaleY(0);
                }
                100% {
                    transform: scaleY(1);
                }
            }
            @-webkit-keyframes scale {
                0% {
                    -webkit-transform: scaleY(0);
                }
                100% {
                    -webkit-transform: scaleY(1);
                }
            }
            @-o-keyframes scale {
                0% {
                    -o-transform: scaleY(0);
                }
                100% {
                    -o-transform: scaleY(1);
                }
            }
            @-moz-keyframes scale {
                0% {
                    -moz-transform: scaleY(0);
                }
                100% {
                    -moz-transform: scaleY(1);
                }
            }
            @keyframes scaleOff {
                0% {
                    transform: scaleY(1);
                }
                100% {
                    transform: scaleY(0);
                }
            }
            li {
                line-height: 9rem;
                color: #383838;
                font-size: 3.2rem;
                padding-right: 3rem;
            }
            li+li {
                border-top: 1px solid #e8e8e8;
            }
            .sel {
                color: #3271f1;
                &:after {
                    content: '';
                    width: 2.6rem;
                    height: 2rem;
                    display: inline-block;
                    background: url("@{images}/sel.png") no-repeat;
                    background-size: 100%;
                    position: relative;
                    top: 3.5rem;
                    float: right;
                }
            }
            .noFilter {
                line-height: 19rem;
                text-align: center;
                font-size:3.2rem;
                // position: fixed;
                // width: 100%;
                // top: 9rem;
                // left: 0;
                // max-height: calc(100% - 18rem);
                // overflow-y: auto;
                
                position: absolute;
                // z-index: 9999;
                width: 100%;
                top: 0;
                left: 0;
            }
        }
        .grade-filter-mask {
            top: 9rem;
            height: calc(100% - 9rem);
        }
    }
    .course-list {
        /* height: calc(100% - 18.9rem);
        overflow: scroll;
        -webkit-overflow-scrolling: touch; */
        li {
            margin-bottom: 2rem;
            border-top:1px solid #e8e8e8;
            border-bottom:1px solid #e8e8e8;
        }
    }
    .mask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1001;
        .more {
            width: 86.4%;
            height: 100%;
            background: #fafafa;
            position: fixed;
            right: 0;
            bottom: 0;
            -webkit-transform-origin: top right;
            transition: transform .3s;
        }
        .more-block{
            transform: scaleX(0);
        }
        .on-more-width {
            transform: scaleX(1);
            // animation: moreScale .3s forwards;
            // -webkit-animation: moreScale .3s forwards;
        }
        .off-more-width {
            transform: scaleX(0);
            // animation: moreScaleOff .3s forwards;
            // -webkit-animation: moreScaleOff .3s forwards;
        }
        @keyframes moreScale {
            0% {
                transform: scaleX(0);
            }
            100% {
                transform: scaleX(1);
            }
        }
        @keyframes moreScaleOff {
            0% {
                transform: scaleX(1);
            }
            100% {
                transform: scaleX(0);
            }
        }
        .more-list {
            /* height: 100%; */
            height: calc(100% - 11rem);
            overflow-y: auto;
            margin-bottom: 1.6rem;
            li {
                border-bottom: 1px solid #e8e8e8;
                background: #fff;
                padding: 0 6.2rem 3.2rem 4rem;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                h2 {
                    color: #000;
                    font-size: 2.8rem;
                    line-height: 8.5rem;
                    font-weight: normal;
                }
                .select-item {
                    /* display: flex;
                    flex-wrap:wrap; */
                    overflow: hidden;
                    .items {
                        width: 30%;
                        height: 7rem;
                        line-height: 7rem;
                        text-align: center;
                        background: #f6f6f6;
                        font-size: 2.4rem;
                        color: #383838;
                        margin: 0 3% 1.6rem 0;
                        float: left;
                        border-radius: 4px;
                    }
                    .selitems {
                        background: #1b1b20;
                        font-size: 2.4rem;
                        color: #fff;
                    }
                }
            }
            li+li {
                margin-top: 1.6rem;
                border-top: 1px solid #e8e8e8;
            }
            .es-li {
                padding-bottom: 0;
                padding-right: 2rem;
                h2 {
                    color: #1d1b21;
                    img {
                        height: 2.6rem;
                        float: right;
                        margin-top: 2.95rem;
                    }
                    .val {
                        float: right;
                        width: 20rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: #666;
                        font-size: 2.4rem;
                        text-align: right;
                        margin-right: 2rem;
                    }
                    .teacher {
                        color: #3271f1;
                    }
                }
            }
        }
        .fixed-bottom {
            position: fixed;
            right: 0;
            bottom: 0;
            display: flex;
            width: 100%;
            /* width: 86.4%; */
            .bottom-item {
                flex: 1;
                height: 9.4rem;
                line-height: 9.4rem;
                font-size: 2.8rem;
                text-align: center;
            }
            .reset {
                color: #383838;
                background: #fff;
                border-top: 1px solid #e8e8e8;
            }
            .save {
                color: #fff;
                background: #3271f1;
            }
        }
        .selectName {
            line-height: 9rem;
            color: #1c1b1f;
            text-align: center;
            padding-left: 1.5rem;
            border-bottom: 1px solid #e8e8e8;
            font-size: 3.6rem;
            background: #fff;
            &:before {
                content: '';
                display: inline-block;
                width: 1.8rem;
                height: 3rem;
                background: url(../../img/arrLeft.png) no-repeat;
                margin-top: 3rem;
                float: left;
            }
        }
        .area-frame,
        .teacher-frame {
            // display:flex;
            height: calc(100% - 9rem);
            overflow:auto;
            .areas {
                width: 32%;
                height: 100%;
                background: #fafafa;
                overflow-y: auto;
                font-size: 3.2rem;
                color: #1c1b20;
                float:left;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }
            .schools {
                // flex: 1;
                float:right;
                width:68%;
                height: 100%;
                overflow-y: auto;
                background: #fff;
                color: #333;
                font-size: 2.8rem;
            }
            li {
                line-height: 11.4rem;
                text-align: center;
            }
            .selectLi {
                color: #3271f1;
            }
        }
        .teacher-frame {
            .areas {
                width: 22.3%;
                font-size: 3.2rem;
                color: #1d1b21;
                background: #fff;
                border-right: 1px solid #e8e8e8;
            }
            .schools{
                width: 77.7%;
            }
            li {
                line-height: 6.5rem;
                font-size: 2.8rem;
                color: #1b1a20;
            }
            .mint-cell-text {
                padding: .5rem 2.8rem;
                border-radius: 2rem;
            }
            .mint-indexlist-navitem {
                line-height: 3rem;
                /* font-weight: bold; */
                font-size: 2rem;
                color: #000;
            }
            .mint-indexlist-nav {
                border-left: none;
            }
            .mint-cell-wrapper {
                line-height: 6.5rem;
                font-size: 2.8rem;
                color: #1b1a20;
                padding-left: 2rem;
                text-align: left;
            }
            .mint-indexsection-index {
                background: #fff;
                text-align: left;
                padding-left: 4.8rem;
            }
            .adds {
                .mint-cell-text {
                    background: #1c1b1f;
                    color: #fff;
                }
            }
            .mint-cell:last-child {
                background-image: none;
            }
        }
    }
}

.more-home {
    bottom: 10rem!important;
}
.noScroll{
    overflow-y: hidden;
}